<template>
  <div class="eventtitle"></div>
  <div class="emrtbox">
    <div class="item">
      <img src="../../../assets/mahjong/icon33.png" alt="">
      <div class="right">
        <div class="heng1">重大事件应急管控预案总数</div>
        <div class="heng2">5</div>
      </div>
    </div>
    <div class="item">
      <img src="../../../assets/mahjong/icon32.png" alt="">
      <div class="right">
        <div class="heng1">运用实施事件数</div>
        <div class="heng2">446</div>
      </div>
    </div>
  </div>
  <!-- 下面是另外一部分 -->
   <div class="emergentitle"></div>
   <div class="noiseownership-title1">
        <div class="tl1">预案名称</div>
        <div class="tl2">运用实施事件数</div>
    </div>
    <div class="noiseownership-content">
        <div class="item" v-for="(item,index) in list" :key="index">
            <div class="tl1">{{ item.name }}</div>
            <div class="tl2">{{ item.num }}</div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
let list = ref([
    {name:'高考期间任何小区麻将馆禁止营业，禁止喧哗',num:3},
    {name:'中考期间任何小区麻将馆禁止营业，禁止喧哗',num:3},
    {name:'国考期间任何小区麻将馆禁止营业，禁止喧哗',num:3},
    {name:'省考期间任何小区麻将馆禁止营业，禁止喧哗',num:3},
    {name:'重大事件期间任何小区麻将馆禁止营业，禁止喧哗',num:434},
    {name:'高考期间任何小区麻将馆禁止营业，禁止喧哗',num:3},
    {name:'中考期间任何小区麻将馆禁止营业，禁止喧哗',num:3},
    {name:'国考期间任何小区麻将馆禁止营业，禁止喧哗',num:3},
    {name:'省考期间任何小区麻将馆禁止营业，禁止喧哗',num:3},
    {name:'重大事件期间任何小区麻将馆禁止营业，禁止喧哗',num:434},
])
</script>

<style lang="less" scoped>
.eventtitle {
  width: 100%;
  height: 36px;
  margin-top: 9px;
  background-image: url("../../../assets/mahjong/icon31.png");
  background-size: 100% 100%;
}
.emergentitle{
  width: 100%;
  height: 36px;
  margin-top: 9px;
  background-image: url("../../../assets/mahjong/icon30.png");
  background-size: 100% 100%;
}
.emrtbox{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  .item{
    width: 48%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    img{
      width: 43px;
      height: 44px;
      margin-right: 10px;
    }
    .right{
      flex: 1;

      .heng1{
        width: 100%;
        height: 18px;
        background: rgba(71, 107, 138, 0.1);
        font-size: 12px;
        color: #FFFFFF;
        box-sizing: border-box;
        padding: 0 5px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }
      .heng2{
        width: 100%;
        height: 24px;
        background: rgba(71, 107, 138, 0.1);
        margin-top: 4px;
        font-family: PingFangSC-Semibold;
        font-size: 17px;
        color: #FFFFFF;
        box-sizing: border-box;
        padding: 0 5px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }
    }
  }
}
.noiseownership-title1{
    width: 100%;
    height: 28px;
    background: rgba(2, 49, 100, .2);
    margin-top: 12px;
    box-sizing: border-box;
    padding: 0 0 0 12px;
    display: flex;
    align-items: center;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #159AFF;
    .tl1{
        flex: 1;
    }
    .tl2{
        width: 155px;
    }
}
/* 隐藏滚动条轨道 */
.noiseownership-content::-webkit-scrollbar {
    display: none; /* 对于Chrome和Safari */
}
.noiseownership-content{
    width: 100%;
    height: 290px;
    overflow-y: scroll;
    .item{
        width: 100%;
        height: 44px;
        margin-top: 4px;
        font-family: PingFangSC-SNaNpxibold;
        font-weight: 600;
        font-size: 12px;
        color: #D0DEEE;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 0 0 12px;
        .tl1{
          flex: 1;
        }
        .tl2{
           width: 155px;
        }
    }
    .item:nth-child(odd){
        background: rgba(71, 138, 138, 0);
        box-shadow: inset 0 -1px 0 0 rgba(108, 128, 151, 0.5);
    }
    .item:nth-child(even){
        background: rgba(71, 107, 138, 0.1);
        box-shadow: inset 0 -1px 0 0 rgba(108, 128, 151, 0.5);
    }
}
</style>
